<!DOCTYPE html>
<html class="client-nojs vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-0 vector-toc-not-available vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-0 skin-theme-clientpref-day vector-sticky-header-enabled" lang="de" dir="ltr"><head>
<meta charset="UTF-8">
<title>Virtual DOM</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="./_res_/favicon.png">
<link rel="canonical" href="https://de.wikipedia.org/wiki/Virtual_DOM"> <link href="./_mw_/ext.cite.styles.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.wikimediamessages.styles.css" rel="stylesheet" type="text/css">
<link href="./_mw_/skins.vector.icons.css" rel="stylesheet" type="text/css">
<link href="./_mw_/skins.vector.search.codex.styles.css" rel="stylesheet" type="text/css">
<link href="./_mw_/skins.vector.styles.css" rel="stylesheet" type="text/css">
<meta name="ResourceLoaderDynamicStyles" content="">
<link href="./_mw_/ext.gadget.citeRef.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.defaultPlainlinks.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiCommonHide.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiCommonLayout.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiCommonStyle.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiDarkmode.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiResponsive.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.specialSearch.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="./_mw_/site.styles.css">
<link rel="stylesheet" type="text/css" href="./_mw_/noscript.css">
<link rel="stylesheet" type="text/css" href="./_res_/footer.css">
<link rel="stylesheet" type="text/css" href="./_res_/vector-2022.css">
</head>
<body class="skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject page-Virtual_DOM rootpage-Virtual_DOM skin-vector-2022 action-view">
<div class="mw-page-container">
<div class="mw-page-container-inner">
<div class="mw-content-container">
<main id="content" class="mw-body">
<header class="mw-body-header vector-page-titlebar">
<h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-main">Virtual DOM</span></h1>
</header>
<a id="top"></a>
<div id="bodyContent" class="vector-body ve-init-mw-desktopArticleTarget-targetContainer" aria-labelledby="firstHeading" data-mw-ve-target-container="">
<div id="contentSub">
<div id="mw-content-subtitle"></div>
</div>
<div id="mw-content-text" class="mw-body-content mw-content-ltr" lang="de" dir="ltr"><div class="mw-content-ltr mw-parser-output" lang="de" dir="ltr"><p>Ein <b>virtual DOM</b> („virtuelles Dokumenten-Objekt-Modell“) ist in <a href="Webanwendungs-Framework" class="mw-redirect" title="Webanwendungs-Framework">Webanwendungs-Frameworks</a> eine leichtgewichtige JavaScript-Darstellung des <a href="Document_Object_Model" title="Document Object Model">Document Object Model (DOM)</a>, die in deklarativen Web-Frameworks wie <a href="React" title="React">React</a>, <a href="Vue.js" title="Vue.js">Vue.js</a>, und <a href="Elm_(Programmiersprache)" title="Elm (Programmiersprache)">Elm</a> verwendet wird.<sup id="cite_ref-1" class="reference"><a href="#cite_note-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup> Die <a href="Update_(Datenbank)" title="Update (Datenbank)">Aktualisierung</a> des virtuellen DOM ist vergleichsweise schneller als die Aktualisierung des tatsächlichen DOM via JavaScript. Daher kann das Framework unnötige Änderungen am virtuellen DOM relativ kostengünstig vornehmen. Das Framework findet dann die Unterschiede zwischen dem vorherigen virtuellen DOM und dem aktuellen und nimmt nur die notwendigen Änderungen am tatsächlichen DOM vor.<sup id="cite_ref-2" class="reference"><a href="#cite_note-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-3" class="reference"><a href="#cite_note-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup>
</p><p><a href="Svelte_(Framework)" title="Svelte (Framework)">Svelte</a> verfügt nicht über ein virtuelles DOM, da sein Entwickler Rich Harris das virtuelle DOM als „reinen Overhead“ bezeichnet.<sup id="cite_ref-4" class="reference"><a href="#cite_note-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup>
</p><p>Ähnliche Techniken sind Glimmer in <a href="Ember.js" title="Ember.js">Ember.js</a><sup id="cite_ref-5" class="reference"><a href="#cite_note-5"><span class="cite-bracket">[</span>5<span class="cite-bracket">]</span></a></sup> und das inkrementelle DOM in <a href="Angular" title="Angular">Angular</a><sup id="cite_ref-6" class="reference"><a href="#cite_note-6"><span class="cite-bracket">[</span>6<span class="cite-bracket">]</span></a></sup>.
</p>
<div class="mw-heading mw-heading2"><h2 id="Einzelnachweise">Einzelnachweise</h2></div><p>
</p><ol class="references">
<li id="cite_note-1"><span class="mw-cite-backlink"><a href="#cite_ref-1">↑</a></span> <span class="reference-text"><span class="cite"><a rel="nofollow" class="external text" href="https://elmprogramming.com/"><i>Beginning Elm.</i></a> In: <i>Elm Programming.</i><span class="Abrufdatum"> Abgerufen am 11. Dezember 2020</span>.</span><span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AVirtual+DOM&rft.title=Beginning+Elm&rft.description=Beginning+Elm&rft.identifier=&rft.date="> </span></span>
</li>
<li id="cite_note-2"><span class="mw-cite-backlink"><a href="#cite_ref-2">↑</a></span> <span class="reference-text"><span class="cite"><a rel="nofollow" class="external text" href="https://reactjs.org/docs/faq-internals.html"><i>Virtual DOM and Internals – React.</i></a> In: <i>reactjs.org.</i><span class="Abrufdatum"> Abgerufen am 11. Dezember 2020</span> (englisch).</span><span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AVirtual+DOM&rft.title=Virtual+DOM+and+Internals+%E2%80%93+React&rft.description=Virtual+DOM+and+Internals+%E2%80%93+React&rft.identifier=&rft.date=&rft.language=en"> </span></span>
</li>
<li id="cite_note-3"><span class="mw-cite-backlink"><a href="#cite_ref-3">↑</a></span> <span class="reference-text"><span class="cite"><a rel="nofollow" class="external text" href="https://www.codecademy.com/articles/react-virtual-dom"><i>React: The Virtual DOM.</i></a> In: <i>Codecademy.</i><span class="Abrufdatum"> Abgerufen am 11. Dezember 2020</span> (englisch).</span><span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AVirtual+DOM&rft.title=React%3A+The+Virtual+DOM&rft.description=React%3A+The+Virtual+DOM&rft.identifier=&rft.date=&rft.language=en"> </span></span>
</li>
<li id="cite_note-4"><span class="mw-cite-backlink"><a href="#cite_ref-4">↑</a></span> <span class="reference-text"><span class="cite">Rich Harris Thu Dec 27 2018: <a rel="nofollow" class="external text" href="https://svelte.dev/blog/virtual-dom-is-pure-overhead"><i>Virtual DOM is pure overhead.</i></a> In: <i>svelte.dev.</i><span class="Abrufdatum"> Abgerufen am 11. Dezember 2020</span> (englisch).</span><span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AVirtual+DOM&rft.title=Virtual+DOM+is+pure+overhead&rft.description=Virtual+DOM+is+pure+overhead&rft.identifier=&rft.creator=Rich+Harris+Thu%26%2332%3BDec+27+2018&rft.date=&rft.language=en"> </span></span>
</li>
<li id="cite_note-5"><span class="mw-cite-backlink"><a href="#cite_ref-5">↑</a></span> <span class="reference-text"><span class="cite"><a rel="nofollow" class="external text" href="https://auth0.com/blog/face-off-virtual-dom-vs-incremental-dom-vs-glimmer/"><i>React Virtual DOM vs Incremental DOM vs Ember's Glimmer: Fight.</i></a> In: <i>Auth0 - Blog.</i><span class="Abrufdatum"> Abgerufen am 11. Dezember 2020</span> (englisch).</span><span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&rfr_id=info%3Asid%2Fde.wikipedia.org%3AVirtual+DOM&rft.title=React+Virtual+DOM+vs+Incremental+DOM+vs+Ember%27s+Glimmer%3A+Fight&rft.description=React+Virtual+DOM+vs+Incremental+DOM+vs+Ember%27s+Glimmer%3A+Fight&rft.identifier=&rft.date=&rft.language=en"> </span></span>
</li>
<li id="cite_note-6"><span class="mw-cite-backlink"><a href="#cite_ref-6">↑</a></span> <span class="reference-text"><a rel="nofollow" class="external text" href="https://github.com/google/incremental-dom">google/incremental-dom</a> auf <a href="GitHub" title="GitHub">GitHub</a></span>
</li>
</ol></div><!--htdig_noindex--><div><div class="zim-footer">
Dieser Artikel wurde von <a class="external text" title="Zuletzt bearbeitet am 2023-04-19" href="https://de.wikipedia.org/wiki/?title=Virtual_DOM&oldid=232961227">Wikipedia</a> herausgegeben. Der Text ist unter <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.de">Creative Commons Attribution-Share Alike 4.0</a> verfügbar, sofern nicht anders angegeben. Für die Mediendateien können zusätzliche Bedingungen gelten.
</div>
</div><!--/htdig_noindex--></div>
</div>
</main>
</div>
</div>
</div>
<script src="./_webp_/webpHandler.js"></script>
</body></html>